<template>
  <div>
    <el-card style="margin: 20px">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
        label-position="top"
      >
        <div class="item">
          <!-- 仓库编号 -->
          <el-form-item style="width: 32%" label="仓库编号" prop="code">
            <el-input v-model="ruleForm.code" disabled />
          </el-form-item>
          <!-- 仓库名称 -->
          <el-form-item style="width: 32%" label="仓库名称" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <!-- 仓库类型 -->
          <el-form-item style="width: 32%" label="仓库类型" prop="type">
            <el-select
              v-model="ruleForm.type"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option label="中转仓" value="ZZ" />
              <el-option label="加工仓" value="JG" />
              <el-option label="储备仓" value="CB" />
              <el-option label="冷藏仓" value="LC" />
            </el-select>
          </el-form-item>
        </div>
        <div class="item">
          <!-- 省/市/区 -->
          <el-form-item label="省/市/区" prop="location" style="width: 31%">
            <el-cascader
              v-model="ruleForm.location"
              style="width: 100%"
              placeholder="请选择"
              :options="allData"
              :props="props"
              clearable
            />
          </el-form-item>
          <!-- 详细地址 -->
          <el-form-item label="详细地址" prop="address" style="width: 65%">
            <el-input v-model="ruleForm.address" />
          </el-form-item>
        </div>

        <div class="item">
          <!-- 仓库状态 -->
          <el-form-item label="仓库状态" prop="status">
            <el-radio-group v-model="ruleForm.status">
              <el-radio label="启用" />
              <el-radio label="停用" />
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="item">
          <!-- 仓库面积 -->
          <el-form-item style="width: 32%" label="仓库面积" prop="surface">
            <el-input v-model="ruleForm.surface" />
          </el-form-item>
          <!-- 负责人 -->
          <el-form-item style="width: 32%" label="负责人" prop="personName">
            <el-input v-model="ruleForm.personName" />
          </el-form-item>
          <!-- 联系电话 -->
          <el-form-item style="width: 32%" label="联系电话" prop="phone">
            <el-input v-model="ruleForm.phone" />
          </el-form-item>
        </div>

        <el-form-item class="btns">
          <el-button type="primary" @click="submitForm('ruleForm')">
            提交
          </el-button>
          <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
          <el-button @click="$router.back()">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import {
  getWarehouseList,
  getWarehouseCode,
  addWarehouse,
  getWarehouseDetails,
  editWarehouse
} from '@/api/warehouse'
import allData from '@/utils/province-city-area'
import rules from '../rules.js'
export default {
  data() {
    return {
      props: {
        value: 'label', label: 'label'
      },
      // 所有省市县数据
      allData,
      title: '新增仓库',
      ruleForm: {
        name: '',
        code: '',
        type: '',
        location: '',
        address: '',
        status: '启用',
        surface: '',
        personName: '',
        phone: ''
      },
      rules
    }
  },
  async created() {
    const id = this.$route.params.id
    if (id !== 'null') {
      this.title = '编辑仓库'
      const res = await getWarehouseDetails(id)
      console.log(res.data.data)
      for (const key in this.ruleForm) {
        this.ruleForm[key] = res.data.data[key]
      }
      this.ruleForm.location = this.ruleForm.location.split('/')
      this.ruleForm.status = this.ruleForm.status === 0 ? '停用' : '启用'
    } else {
      this.ruleForm.code = (await getWarehouseCode()).data.data
    }
  },
  methods: {
    // 获取仓库数据 返回所有编号
    async getCodeList() {
      return ((await getWarehouseList()).data.data.records).map(item => item.code)
    },
    async submitForm(formName) {
      await this.$refs[formName].validate()
      this.ruleForm.province = this.ruleForm.location[0]
      this.ruleForm.city = this.ruleForm.location[1]
      this.ruleForm.area = this.ruleForm.location[2]
      this.ruleForm.location = this.ruleForm.location.join('/')
      this.ruleForm.status = this.ruleForm.status === '启用' ? 1 : 0
      if (this.title === '新增仓库') {
        await addWarehouse(this.ruleForm)
      } else {
        await editWarehouse(this.ruleForm)
      }
      // 调用接口 发送请求 成功后清除数据 返回之前的路由界面
      this.$message.success(this.title + '成功')
      this.$router.back()
    }
    // resetForm(formName) {
    //   this.$refs[formName].resetFields()
    // }
  }
}
</script>
<style scoped lang="scss">
.item {
  display: flex;
  margin: 10px 0;
  > * {
    margin: 0 10px;
  }
}

.btns {
  margin-top: 20px;
  ::v-deep .el-form-item__content {
    display: flex;
    justify-content: center;
    > * {
      margin: 0 10px;
    }
  }
}
</style>
